<template>
	<div class="service-main">
		<el-row type="flex" class="service-filter">
			<el-col :span="12">
				<cl-flex1>
					<div class="cl-filter">
						<span class="cl-filter__label">关键字</span>
						<el-input
							v-model="keyword"
							placeholder="请输入服务名称进行搜索"
							clearable
							prefix-icon="el-icon-search"
						/>
					</div>
				</cl-flex1>
			</el-col>
			<el-col :span="12">
				<div style="width:250px;" class="cl-filter">
					<span class="cl-filter__label">经营类目</span>
					<cl-select v-model="serviceLevel1" @change="serviceLevel2 = '0'" filterable>
						<el-option
							v-for="(item, index) in serviceData"
							:key="item.id"
							:label="item.cname"
							:value="index"
						/>
					</cl-select>
				</div>
			</el-col>
		</el-row>
		<div class="service-wrap" v-loading="loading">
			<el-tabs
				tab-position="left"
				style="height:400px;"
				v-if="serviceList.length"
				v-model="serviceLevel2"
			>
				<el-tab-pane
					v-for="(item, idx) in serviceList"
					:key="item.id"
					:label="item.cname"
					:name="idx + ''"
				>
					<keep-alive>
						<el-row
							class="service-tab-pane"
							:gutter="10"
							v-if="item.items && serviceLevel2 == idx"
						>
							<cl-empty v-if="!item.items.length" tips="暂无服务" />
							<template v-else>
								<template v-for="(subitem, subidx) in item.items">
									<el-col
										:span="browser.isMobile ? 24 : 8"
										:key="subidx"
										v-if="
											subitem.status == 1 && subitem.si_name.includes(keyword)
										"
									>
										<div
											class="flex flex-align-center mb-1 service-item"
											:class="{
												active: selectServiceIds.includes(subitem.si_id),
												disabled: disabledIds.includes(subitem.si_id)
											}"
											@click="itemClick(subitem)"
										>
											<cl-avatar
												:src="
													subitem.picture_url.length
														? subitem.picture_url[0]
														: ''
												"
												shape="square"
											/>
											<cl-flex1 class="pl-1">
												{{ subitem.si_name }}
											</cl-flex1>
										</div>
									</el-col>
								</template>
							</template>
						</el-row>
					</keep-alive>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="btns-wrap">
			<el-button @click="cancel">关闭</el-button>
			<el-button type="primary" @click="confirm" :disabled="loading">确定</el-button>
		</div>
	</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
	name: "service-list",
	props: {
		// 选中的服务列表
		value: {
			type: Array,
			default: () => []
		},
		biz_id: {
			type: [Number, String],
			default: ""
		},
		// 升级
		upgrade: {
			type: Boolean,
			default: false
		},
		// 多类别
		multiclass: {
			type: Boolean,
			default: true
		},
		disabledList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			loading: false,
			//待服务项目
			serviceData: [],
			keyword: "",
			// 一级选中
			serviceLevel1: "",
			// 二级选中
			serviceLevel2: "0",
			// 选中的服务列表
			selectServiceList: []
		};
	},
	computed: {
		...mapGetters(["browser"]),
		serviceList() {
			const { serviceData, serviceLevel1 } = this;
			return serviceData[serviceLevel1 || 0]?.childlist ?? [];
		},
		selectServiceIds() {
			return this.selectServiceList.map(v => v.si_id);
		},
		disabledIds() {
			return this.disabledList.map(v => v.si_id);
		},
		getBizId() {
			return !this.biz_id ? this.getCurrBiz() : this.biz_id;
		}
	},
	methods: {
		init() {
			this.selectServiceList = [...this.value];
			this.keyword = "";
			this.serviceData.length && (this.serviceLevel1 = 0);
			this.serviceLevel2 = "0";
			this.getList();
		},
		async getList() {
			this.loading = true;
			const data = await this.$service.public
				.serviceGetTypeSons({
					type: 1,
					biz_id: this.getBizId,
					search: this.keyword
				})
				.finally(() => {
					this.loading = false;
				});
			!this.serviceLevel1 && (this.serviceLevel1 = 0);
			this.serviceData = data;
		},
		itemClick(item) {
			if (this.upgrade) {
				this.selectServiceList = [item];
				return;
			}
			if (!this.multiclass) {
				let isSome = this.selectServiceList.some(v => v.s_category != item.s_category);
				if (isSome) {
					this.selectServiceList = [];
				}
			}
			let idx = this.selectServiceIds.findIndex(v => v == item.si_id);
			if (idx >= 0) {
				this.selectServiceList.splice(idx, 1);
				return;
			}
			this.selectServiceList.push(item);
		},
		cancel() {
			this.$emit("cancel");
		},
		confirm() {
			this.cancel();
			// this.$emit("input", this.selectServiceList);
			this.$emit("confirm", this.selectServiceList);
		}
	}
};
</script>
<style lang="scss" scoped>
.service-main {
	position: relative;

	.service-filter {
		padding: 10px;
		border-bottom: 1px solid $border-main;
		::v-deep .cl-select .el-icon-circle-close {
			display: none;
		}
	}
	.service-wrap {
		height: 400px;
		.el-tabs__item {
			border-bottom: 1px solid $border-main;
			box-sizing: border-box;
		}
		.el-tabs__nav-wrap::after {
			width: 1px;
		}
	}

	.service-tab-pane {
		padding-top: 10px;
		width: 100%;
		height: 350px;
		overflow: auto;
		border-bottom: 1px solid $border-main;
		&::-webkit-scrollbar {
			width: 5px;
			height: 5px;
		}
	}
	.service-item {
		background: #faf9fc;
		border-radius: 3px;
		overflow: hidden;
		padding: 5px;
		height: 65px;
		box-sizing: border-box;
		cursor: pointer;
		border: 1px solid transparent;
		transition: border 0.15s ease;
		&.active {
			border-color: $primary;
		}
		&.disabled {
			pointer-events: none;
			cursor: not-allowed;
			opacity: 0.5;
			border: 1px solid #e6a23c;
			user-select: none;
		}
	}
	.btns-wrap {
		position: absolute;
		bottom: 10px;
		right: 10px;
	}
}
</style>
